<template>
  <v-card>
    <v-card-title>
      <v-row align="center">
        <!-- <v-col class="d-flex" cols="4" sm="3">
          <v-text-field v-model="name" label="请输入搜索姓名"></v-text-field>
        </v-col>
        <v-col class="d-flex" cols="4" sm="3">
          <v-text-field
            v-model="mobile"
            label="请输入搜索手机号"
          ></v-text-field>
        </v-col> -->

        <v-col class="d-flex" cols="4" sm="3">
          <v-text-field
            v-model="FullName"
            label="请输入搜索公司"
          ></v-text-field>
        </v-col>

        <v-col class="d-flex" cols="4" sm="3">
          <v-text-field
            v-model="hospital"
            label="请输入搜索门诊"
          ></v-text-field>
        </v-col>

        <v-col class="d-flex" cols="4" sm="3" v-if="currentSaleId <= 0">
          <v-select
            v-model="saleId"
            item-text="name"
            item-value="id"
            :items="option.sale"
            :clearable="true"
            label="业务员"
          ></v-select>
        </v-col>

        <v-col class="d-flex" cols="4" sm="3">
          <cascader @changeCity="changeCity"></cascader>
        </v-col>

        <v-col class="d-flex" cols="4" sm="2">
          <v-btn block color="primary" @click="getData()">搜索</v-btn>
        </v-col>
      </v-row>
      <v-spacer></v-spacer>
    </v-card-title>
    <v-data-table
      :loading="loading"
      :headers="headers"
      :items="data"
      :footer-props="{
        showFirstLastPage: true,
        prevIcon: 'mdi-minus',
        nextIcon: 'mdi-plus',
      }"
      :page.sync="current_page"
      :items-per-page="12"
      hide-default-footer
      class="elevation-1"
      @page-count="pageCount = $event"
    >
      <template v-slot:[`item.name`]="{ item }">
        {{ item.name }}
      </template>
      <template v-slot:[`item.option`]="{ item }">
        <v-btn
          small
          class="mr-2"
          @click="goDetail(item.user.id)"
          v-ButtonPermission="{ ButtonName: 'UserEdit' }"
        >
          <v-icon class="d-none d-sm-flex" dark left
            >mdi-clipboard-edit-outline</v-icon
          >
          编辑
        </v-btn>

        <v-btn
          v-ButtonPermission="{ ButtonName: 'UserResetPassword' }"
          small
          class="mr-2"
          color="error"
          dark
          @click="
            dialog = true;
            _templete = item;
          "
        >
          <v-icon class="d-none d-sm-flex" dark left
            >mdi-clipboard-edit-outline</v-icon
          >
          重置密码
        </v-btn>

        <v-btn
          v-ButtonPermission="{ ButtonName: 'UserFollow' }"
          small
          class="mr-2"
          color="primary"
          dark
          v-if="currentSaleId <= 0"
          @click="
            accountdialog = true;
            _templete = item;
          "
        >
          <v-icon class="d-none d-sm-flex" dark left
            >mdi-clipboard-edit-outline</v-icon
          >
          余额
        </v-btn>

        <v-btn
          small
          class="mr-2"
          color="primary"
          dark
          @click="getFlow(item.user && item.user.id)"
        >
          <v-icon class="d-none d-sm-flex" dark left
            >mdi-clipboard-edit-outline</v-icon
          >
          流水
        </v-btn>
      </template>
    </v-data-table>

    <v-pagination
      class="pt-8 pb-8"
      v-model="current_page"
      :length="last_page"
      :total-visible="10"
      @input="changePage"
    ></v-pagination>
    <!---->

    <v-dialog v-model="dialog" width="500">
      <v-card>
        <v-card-title class="headline grey lighten-2">
          <span>重置密码</span>
          <v-spacer></v-spacer>
          <v-menu bottom left>
            <template v-slot:activator="{ on, attrs }">
              <v-btn icon v-bind="attrs" v-on="on" @click="dialog = false">
                <v-icon>mdi-close</v-icon>
              </v-btn>
            </template>
          </v-menu>
        </v-card-title>
        <v-card-text>
          <v-text-field
            class="mt-4"
            label="输入新密码"
            v-model="newPassword"
          ></v-text-field>
        </v-card-text>
        <v-divider></v-divider>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="primary" text @click="submitResetPassword()">
            提交
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

    <v-dialog v-model="accountdialog" width="500">
      <v-card>
        <v-card-title class="headline grey lighten-2">
          <span>账户余额</span>
          <v-spacer></v-spacer>
          <v-menu bottom left>
            <template v-slot:activator="{ on, attrs }">
              <v-btn
                icon
                v-bind="attrs"
                v-on="on"
                @click="accountdialog = false"
              >
                <v-icon>mdi-close</v-icon>
              </v-btn>
            </template>
          </v-menu>
        </v-card-title>
        <v-card-text>
          <v-container>
            <v-text-field
              class="mt-4"
              label="输入变更金额"
              v-model="account"
            ></v-text-field>
            <v-select v-model="type" :items="items" label="操作类别"></v-select>
            <v-text-field
              class="mt-1"
              label="备注"
              v-model="remark"
            ></v-text-field
          ></v-container>
        </v-card-text>
        <v-divider></v-divider>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="primary" text @click="changeAccount()"> 提交 </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

    <v-dialog v-model="flowdialog">
      <v-card>
        <v-card-title class="headline grey lighten-2">
          <span>流水</span>
          <v-spacer></v-spacer>
          <v-menu bottom left>
            <template v-slot:activator="{ on, attrs }">
              <v-btn icon v-bind="attrs" v-on="on" @click="flowdialog = false">
                <v-icon>mdi-close</v-icon>
              </v-btn>
            </template>
          </v-menu>
        </v-card-title>
        <v-card-text>
          <v-container>
            <v-simple-table>
              <template v-slot:default>
                <thead>
                  <tr>
                    <th class="text-left">标题</th>
                    <th class="text-left">类型</th>
                    <th class="text-left">金额</th>
                    <th class="text-left">操作后余额</th>
                    <th class="text-left">时间</th>
                    <th class="text-left">备注</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="item in flow" :key="item.name">
                    <td>{{ item.title }}</td>
                    <td>
                      {{ item.type == 1 ? "账户充值" : "" }}
                      {{ item.type == 2 ? "充值赠送" : "" }}
                      {{ item.type == 3 ? "订单扣款" : "" }}
                      {{ item.type == 4 ? "退单返还" : "" }}
                      {{ item.type == 5 ? "后台扣款" : "" }}
                    </td>
                    <td>
                      {{ item.state == 1 ? "+" : ""
                      }}{{ item.state == 2 ? "-" : "" }}{{ item.account }}
                    </td>
                    <td>{{ item.accountAfter }}</td>
                    <td>{{ item.createAt }}</td>
                    <td>{{ item.remark }}</td>
                  </tr>
                </tbody>
              </template>
            </v-simple-table>
          </v-container>
        </v-card-text>
        <v-divider></v-divider>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="primary" text @click="flowdialog = false"> 关闭 </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-card>
</template>

<script>
import cascader from "@/components/cascader";

export default {
  name: "User",
  components: {
    cascader,
  },

  data: () => {
    return {
      currentSaleId: "",
      loading: false,
      name: "",
      hospital: "",
      FullName: "",
      saleId: "",
      mobile: "",
      current_page: 1,
      last_page: 0,
      headers: [
        { text: "姓名", value: "name", sortable: false },
        { text: "操作", value: "option", sortable: false },
      ],
      data: [],
      chooseCity: [],
      dialog: false,
      accountdialog: false,
      flowdialog: false,
      newPassword: null,
      account: null,
      remark: null,
      type: 1,
      items: [
        { text: "充值", value: 1 },
        { text: "扣款", value: 2 },
      ],
      _templete: null,
      flow: [],
      option: null,
    };
  },

  created() {
    this.getData();
    this.option = JSON.parse(sessionStorage.getItem("option"));
    this.currentSaleId = JSON.parse(
      sessionStorage.getItem("LOGIN_INFO")
    ).saleId;
  },

  methods: {
    getData(page = 1) {
      this.data = [];
      this.loading = true;
      this.Http.get("/admin/user/index", {
        page: page,
        name: this.name,
        mobile: this.mobile,
        FullName: this.FullName,
        hospital: this.hospital,
        saleId: this.saleId,
        areaId: this.chooseCity[0],
        cityId: this.chooseCity[1],
        districtId: this.chooseCity[2],
      }).then((res) => {
        this.loading = false;
        if (res.code == 1) {
          this.total = res.data.total;
          this.current_page = res.data.current_page;
          this.last_page = res.data.last_page;
          this.per_page = res.data.per_page;
          this.data = res.data.data;
        } else {
          this.$Message.error(res.msg);
        }
      });
    },

    goDetail(id) {
      this.$router.push({
        path: "/index/userdetail",
        query: { id: id },
      });
    },

    changePage(page) {
      this.getData(page);
    },

    submitResetPassword() {
      if (!this.newPassword) {
        this.$Message.error("请输入重置密码");
        return;
      }
      this.Http.get("/admin/user/editPass", {
        id: this._templete.id,
        password: this.newPassword,
      }).then((res) => {
        if (res.code == 1) {
          this.$Message.success(res.msg);
          this._templete = null;
          this.newPassword = "";
          this.dialog = false;
        } else {
          this.$Message.error(res.msg);
        }
      });
    },

    changeAccount() {
      if (!this.account) {
        this.$Message.error("请输入变动金额");
        return;
      }
      this.Http.post("/admin/user/account", {
        userId: this._templete.user.id,
        account: this.account,
        type: this.type,
        remark: this.remark,
      }).then((res) => {
        if (res.code == 1) {
          this.$Message.success(res.msg);
          this._templete = null;
          this.account = "";
          this.remark = "";
          this.accountdialog = false;
          this.getData();
        } else {
          this.$Message.error(res.msg);
        }
      });
    },

    getFlow(id) {
      this.Http.get("/admin/user/accountLog", {
        userId: id,
      }).then((res) => {
        this.loading = false;
        if (res.code == 1) {
          this.flow = res.data;
          this.flowdialog = true;
          this.getData();
        } else {
          this.$Message.error(res.msg);
        }
      });
    },

    changeCity(e) {
      this.chooseCity = e;
    },
  },
};
</script>